<!DOCTYPE html>
<html>
<head>  	
	
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css" />        
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
	<link rel="stylesheet" href="css/theme.css" />
	<script src="js/jquery-1.9.1.min.js"></script>  
	<script src="js/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/alzApp.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
	
	
  	<script type="text/javascript">
		
	
	 	function search(){
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			  }
			else
			  {// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			xmlhttp.open("GET", "guiaEsp.xml", false);
			xmlhttp.send();
			xmlDoc=xmlhttp.responseXML;
			
			var items = xmlDoc.getElementsByTagName("item");
			
			var searchedText = $('#searchInput').textinput().val().toLowerCase();
			
			for (i=0;i<items.length;i++)
				  {				 
					var name = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					if (name.toLowerCase().indexOf(searchedText) >= 0)
					{
						var id = items[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;				  
						$('#listResultTitle').append("<li><a href=itemsMenu.html?selectedItem=" + id + " rel='external'>" + name + "</a></li>");					
					}
					else
					{
						var description = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
						if (description.toLowerCase().indexOf(searchedText) >= 0)
						{
							var id = items[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;				  
							$('#listResultContent').append("<li><a href=itemsMenu.html?selectedItem=" + id + " rel='external'>" + name + "</a></li>");					
						}
					}
				  }
			$('#listResultTitle').listview('refresh');
			$('#listResultContent').listview('refresh');
		};	
		
		
		$(document).on( 'pageinit',function(event){
		  	$('#searchInput').bind( "keydown", function(event) {
			  searchEvent();
			});
		});	

		function searchEvent(){
			if (window.event && window.event.keyCode == 13) {
				search();
			}
		};

		</script>
		
		
</head>

<body>
	<div data-role="header">
		<h1>Buscar</h1>
	</div>
	<div data-role="content">
		<input type="search" name="search" id="searchInput" onKeyPress="searchEvent()" />
		
		<ul id="listResultTitle" style="margin-top:14px" data-role="listview">		
		</ul>
		<ul id="listResultContent" style="margin-top:14px" data-role="listview">
		</ul>
	</div>
	  
	<div data-role="footer" class="ui-bar" data-position="fixed">
		<a href="index.html" data-icon="plus" rel="external">Inicio</a>
	</div>
	

</body>
</html>